import React from 'react'
// import a from './TabBar.module.css'
import { useSelector } from 'react-redux'
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

import { useNavigate, useLocation } from 'react-router-dom'
export default function TabBar1() {
    const navigate = useNavigate()
    const menuList = useSelector(a => a.user.menuList)
    const location = useLocation()
    const { pathname } = location
    const getIcon = (title) => {
        if (title == "首页") {
            return <AppOutline></AppOutline>
        } else if (title == "消息") {
            return <MessageOutline></MessageOutline>
        } else if (title == "订单") {
            return <UnorderedListOutline></UnorderedListOutline>
        } else {
            return <UserOutline></UserOutline>
        }
    }
    return (
        <div className='publicTabbar'>
            <TabBar activeKey={pathname}
                style={{ width: '100%', backgroundColor: 'white', position: 'fixed', bottom: '0px', height: '60px', lineHeight: '60px' }}
                onChange={(value) => {
                    console.log(value)
                    navigate(value)
                }}
            >
                {menuList.map(item => (

                    <TabBar.Item
                        key={item.key}
                        icon={getIcon(item.title)}
                        title={item.title}
                        badge={item.badge}
                        onClick={() => {
                            console.log(1)
                        }}
                    />
                ))}
            </TabBar>
        </div>
    )
}
